<template>
	<!-- 电梯实时监控/运行实时监控/监控详情-->
	<div class="operationBox heightMax operationBoxDetail publicboxNoPadding">
		<div class="operationBoxLeft" v-loading='leftLoading'>
			<vueScroll>
				<div class="listName">
					<i></i><span class="font14">使用单位：{{property_company_name}}</span>
				</div>
				<div class="liftName">
					<h3>{{internal_no}}</h3>
				</div>
				<div class="speBtn" style="margin-bottom: 5px;">
					<el-tooltip content="电梯内视频监控" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-sidenav_monitoring" @click='lookVideo'></el-button>
					</el-tooltip>
					<el-tooltip content="体检报告" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-guzhangzhenduan"></el-button>
					</el-tooltip>
					<el-tooltip content="分析诊断" placement="bottom" effect="light">
						<el-button class="font25" icon="sjicon-zhenduan" @click='goZhenDuan'></el-button>
					</el-tooltip>
					<el-tooltip content="设备状态" placement="bottom" effect="light">
						<el-button class="font25 shebeiS" icon="sjicon-equipment"></el-button>
					</el-tooltip>
				</div>
				<div class="liftBox">
					<div class="bgLift">
						<div class="lift-num">
							<div class="Num">
								{{currentFloor}}
								<img :class="['upOrDown',run_status == -1 ? ' transFormZ' : '']" src="../../../assets/liftImg/liftUpOrDwon.png"
								 alt="" v-show="run_status != 0 || run_status != 2">
							</div>
						</div>
						<div class="door" v-if="isShowAnimated">
							<img src="../../../assets/liftImg/leftDoor.jpg" alt="" :class="[is_open == 1? 'liftOpen' : 'liftClose']">
							<img src="../../../assets/liftImg/rightDoor.jpg" alt="" :class="[is_open == 1? 'liftOpen' : 'liftClose']">
						</div>
						<div class="door" v-if="is_open == 1 && !isShowAnimated">

						</div>
						<div class="door" v-if="is_open == 0 && !isShowAnimated">
							<img src="../../../assets/liftImg/leftDoor.jpg" alt="">
							<img src="../../../assets/liftImg/rightDoor.jpg" alt="">
						</div>
					</div>
				</div>
				<div class="listName listNmaTwo">
					<i></i><span class="font14">今日异常信号：<span v-if="newAlermArr.length == 0">暂无异常信号</span></span>
				</div>
				<div class="allSignImg" v-if="newAlermArr.length != 0">
					<div class="imgItem" v-for="(item,index) in newAlermArr" :key='index'>
						<img :src="redImgList[Number(item.code)-1].img" alt="">
						<el-tooltip class="item" effect="dark" :content="item.value" placement="top">
							<p>{{item.value}}</p>
						</el-tooltip>
					</div>
				</div>
				<div class="lookAllSign" @click="signShow">
					查看所有信号
				</div>
			</vueScroll>
		</div>
		<div class="operationBoxRight" v-loading='loading'>
			<div class="messBox">
				<el-button type="primary" size="mini" @click='goStatisticsRouter(5)'>报警记录</el-button>
				<!-- <el-button type="primary" size="mini">环境运行</el-button> -->
				<el-button type="primary" size="mini" @click='goStatisticsRouter(4)'>基本信息</el-button>
				<el-button type="primary" size="mini" @click='goStatisticsRouter(1)'>检验信息</el-button>
				<el-button type="primary" size="mini" @click='goStatisticsRouter(2)'>维保信息</el-button>
				<!-- <el-button type="primary" size="mini">电梯事件</el-button> -->
				<el-button type="primary" size="mini" @click='goStatisticsRouter(3)'>统计信息</el-button>
			</div>
			<div class="listName">
				<i></i><span class="font14">今日故障</span>
			</div>
			<el-row>
				<el-col :span="20" class='col'>
					<span>报警类型：</span>
					<el-select v-model="policeStatus" multiple placeholder="请选择" clearable class='moreSelect'>
						<el-option :disabled="isDisable" v-for="item in policeStatusArr" :key="item.code" :label="item.value" :value="item.code">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" icon="el-icon-search" class='fr' @click='find'>搜索</el-button>
				</el-col>
			</el-row>
			<div class="tableBox">
				<vueScroll>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
					 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
						<el-table-column type="index" class="over" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="报警时间">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.create_time" placement="top">
									<span class="speSpan">{{scope.row.create_time}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="报警地点">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.alarm_position" placement="top">
									<span class="speSpan">{{scope.row.alarm_position}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="报警类型">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.alarm_typeName" placement="top">
									<span class="speSpan">{{scope.row.alarm_typeName}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="通知人员">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.notify_person" placement="top">
									<span class="speSpan">{{scope.row.notify_person}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="回执状态">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.receipt_status" placement="top">
									<span class="speSpan">{{scope.row.receipt_status}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="通知方式">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.notify_method" placement="top">
									<span class="speSpan">{{scope.row.notify_method}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
		</div>
		<el-dialog title="查看所有信号" center :visible.sync="signVisible" width="30%" :before-close="signShow" append-to-body>
			<div class="allSignImg">
				<div class="imgItem" v-for="(item,index) in imgList" :key='index'>
					<img :src="item.img" alt="">
					<p>{{item.message}}</p>
				</div>
			</div>
		</el-dialog>
		<videoControl v-if='videoShow' :dialogVisible='videoShow' @handleClose='handleClose'></videoControl>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	import videoControl from '@/components/publicComponents/videoControl.vue'
	export default {
		components:{
			videoControl
		},
		mounted() {
			this.getAllSign()
			this.getTodayMess()
			this.getLiftNow()
			this.getLiftUpOrDown()
			if (!this.liftId) {
				if (localStorage.currentInstallation_place) {
					this.internal_no = JSON.parse(localStorage.currentInstallation_place).name
				}
				if (localStorage.currentproperty_company_name) {
					this.property_company_name = JSON.parse(localStorage.currentproperty_company_name).name
				}
			}
		},
		data() {
			return {
				videoShow:false,
				redImgList: [{
						img: require('../../../assets/redSIgn/sign1.png'),
						message: '轿厢报警按钮'
					},
					{
						img: require('../../../assets/redSIgn/sign2.png'),
						message: '电梯困人'
					},
					{
						img: require('../../../assets/redSIgn/sign3.png'),
						message: '非平层停梯'
					},
					{
						img: require('../../../assets/redSIgn/sign4.png'),
						message: '安全回路断路'
					},
					{
						img: require('../../../assets/redSIgn/sign5.png'),
						message: '轿厢冲顶'
					},
					{
						img: require('../../../assets/redSIgn/sign6.png'),
						message: '轿厢蹲底'
					},
					{
						img: require('../../../assets/redSIgn/sign7.png'),
						message: '开门走梯'
					},
					{
						img: require('../../../assets/redSIgn/sign8.png'),
						message: '电梯速度异常'
					},
					{
						img: require('../../../assets/redSIgn/sign9.png'),
						message: '电梯运行时安全回路断路'
					},
					{
						img: require('../../../assets/redSIgn/sign10.png'),
						message: '关门故障'
					},
					{
						img: require('../../../assets/redSIgn/sign11.png'),
						message: '开门故障'
					},
					{
						img: require('../../../assets/redSIgn/sign12.png'),
						message: '轿厢在开锁区域外停止'
					},
					{
						img: require('../../../assets/redSIgn/sign13.png'),
						message: '轿厢意外移动'
					},
					{
						img: require('../../../assets/redSIgn/sign14.png'),
						message: '电动机运转时间限制器动作'
					},
					{
						img: require('../../../assets/redSIgn/sign15.png'),
						message: '楼层位置丢失'
					},
					{
						img: require('../../../assets/redSIgn/sign16.png'),
						message: '其他阻止电梯再启动的故障'
					},
					{
						img: require('../../../assets/redSIgn/sign17.png'),
						message: '其它故障'
					},
				],
				imgList: [{
						img: require('../../../assets/allSign/sign1.png'),
						message: '轿厢报警按钮'
					},
					{
						img: require('../../../assets/allSign/sign2.png'),
						message: '电梯困人'
					},
					{
						img: require('../../../assets/allSign/sign3.png'),
						message: '非平层停梯'
					},
					{
						img: require('../../../assets/allSign/sign4.png'),
						message: '安全回路断路'
					},
					{
						img: require('../../../assets/allSign/sign5.png'),
						message: '轿厢冲顶'
					},
					{
						img: require('../../../assets/allSign/sign6.png'),
						message: '轿厢蹲底'
					},
					{
						img: require('../../../assets/allSign/sign7.png'),
						message: '开门走梯'
					},
					{
						img: require('../../../assets/allSign/sign8.png'),
						message: '电梯速度异常'
					},
					{
						img: require('../../../assets/allSign/sign9.png'),
						message: '电梯运行时安全回路断路'
					},
					{
						img: require('../../../assets/allSign/sign10.png'),
						message: '关门故障'
					},
					{
						img: require('../../../assets/allSign/sign11.png'),
						message: '开门故障'
					},
					{
						img: require('../../../assets/allSign/sign12.png'),
						message: '轿厢在开锁区域外停止'
					},
					{
						img: require('../../../assets/allSign/sign13.png'),
						message: '轿厢意外移动'
					},
					{
						img: require('../../../assets/allSign/sign14.png'),
						message: '电动机运转时间限制器动作'
					},
					{
						img: require('../../../assets/allSign/sign15.png'),
						message: '楼层位置丢失'
					},
					{
						img: require('../../../assets/allSign/sign16.png'),
						message: '其他阻止电梯再启动的故障'
					},
					{
						img: require('../../../assets/allSign/sign17.png'),
						message: '其它故障'
					},
				],
				page: 1,
				page_size: 10,
				total: 1,
				tableData: [],
				policeStatus: [],
				policeStatusArr: [],
				alarm: [],
				property_company_name: '',
				internal_no: '',
				alarmMess: '',
				loading: false,
				currentFloor: 0,
				is_open: 0,
				run_status: 0,
				leftLoading: false,
				signVisible: false,
				timer: null,
				isNumber: 0,
				isShowDoor: false,
				isShowAnimated: false,
				resid: '',
				register_codeNew: '',
				installation_placeNew: '',
				manufacturer_company_nameNew: '',
				last_checkup_score: '',
				last_checkup_time: '',
				newAlermArr: []
			}
		},
		computed: {
			register_code() {
				if (localStorage.register_code) {
					return JSON.parse(localStorage.register_code).id
				} else {
					return ''
				}
			},
			isDisable() {
				if (this.policeStatus.length >= 3) {
					return true
				} else {
					return false
				}
			},
			liftId() {
				if (localStorage.liftDetailId) {
					return JSON.parse(localStorage.liftDetailId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			lookVideo(){
				if(localStorage.surl){
					this.videoShow = true
				}else{
					this.$message.info('暂无摄像头资源')
				}
			},
			handleClose(){
				this.videoShow = false
			},
			goZhenDuan() {
				let obj = {
					newLabel: '电梯诊断分析详情',
					index: '/MainView/ElevatorStatistics/Diagnose'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'Diagnose'
				})
				localStorage.diagnoseId = JSON.stringify({
					id: this.resid
				})
				localStorage.diaRegister_code = JSON.stringify({
					name: this.register_codeNew
				})
				localStorage.diaInstallation_place = JSON.stringify({
					name: this.installation_placeNew
				})
				localStorage.diaProperty_company_name = JSON.stringify({
					name: this.manufacturer_company_nameNew
				})
				localStorage.last_checkup_score = JSON.stringify({
					point: this.last_checkup_score
				})
				localStorage.last_checkup_time = JSON.stringify({
					time: this.last_checkup_time
				})
			},
			goStatisticsRouter(val) {
				let mess = ''
				let index = ''
				let name = ''
				if (val == 1) {
					mess = '检验信息'
					index = '/MainView/RealTimeElevatorMonitoring/MonitoringDetails/TestMess'
					name = 'TestMess'
				} else if (val == 2) {
					mess = '维保信息'
					index = '/MainView/RealTimeElevatorMonitoring/MonitoringDetails/MintenanceMess'
					name = 'MintenanceMess'
				} else if (val == 3) {
					mess = '统计信息'
					index = '/MainView/RealTimeElevatorMonitoring/MonitoringDetails/StatisticsMess'
					name = 'StatisticsMess'
				} else if (val == 4) {
					mess = '基本信息'
					index = '/MainView/RealTimeElevatorMonitoring/MonitoringDetails/BaseInfo'
					name = 'BaseInfo'
				} else if (val == 5) {
					mess = '报警记录'
					index = '/MainView/RealTimeElevatorMonitoring/MonitoringDetails/Alarm'
					name = 'Alarm'
				}
				localStorage.newMess = JSON.stringify({
					title: mess
				})
				let obj = {
					newLabel: mess,
					index: index
				}
				console.log(name)
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: name,
				})
			},
			//查看所有电梯信号
			signShow() {
				this.signVisible = !this.signVisible
			},
			//获取电梯上还是下
			getLiftNow() {
				this.isNumber++
				if (this.liftId) {
					let url = '/manu/elevator/' + this.liftId + '/'
					axiosGet(url, {}, (res) => {
						if (res.code == 0) {
							if (!this.resid) {
								this.resid = res.detail.id
								this.register_codeNew = res.detail.register_code
								this.installation_placeNew = res.detail.installation_place
								this.manufacturer_company_nameNew = res.detail.manufacturer_company_name
								this.last_checkup_score = res.detail.last_checkup_score
								this.last_checkup_time = res.detail.last_checkup_time
							}
							this.newAlermArr = res.detail.alarms
							this.leftLoading = false
							this.property_company_name = res.detail.property_company_name
							if (res.detail.cp) {
								this.currentFloor = res.detail.cp
							} else {
								this.currentFloor = 0
							}
							if (this.isNumber == 1) {
								this.isShowAnimated = false
							} else {
								if (this.is_open != res.detail.is_open) {
									this.isShowAnimated = true
								} else {
									this.isShowAnimated = false
								}
							}
							if (res.detail.is_open) {
								this.is_open = res.detail.is_open
							} else {
								this.is_open = 0
							}
							if (res.detail.run_status) {
								this.run_status = res.detail.run_status
							} else {
								this.run_status = 0
							}
							this.internal_no = res.detail.internal_no
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}
			},
			getLiftUpOrDown() {
				if (this.liftId) {
					const timer = setInterval(() => {
						this.getLiftNow()
					}, 2000)
					this.$once('hook:beforeDestroy', () => {
						clearInterval(timer);
					})
				}
			},
			//获取今日故障数据
			getTodayMess() {
				if (this.liftId) {
					this.loading = true
					let url = '/manu/elevator/alarmsV2/'
					let params = {
						id: this.liftId,
						page: this.page,
						page_size_count: this.page_size,
						today:1
						// 					register_code: this.register_code,
						// 					codes:this.policeStatus
					}
					axiosGet(url, params, (res) => {
						if (res.code == 0) {
							this.total = res.detail.count
							this.tableData = res.detail.results.map((item) => {
								if (item.alarm_type.length != 0) {
									if (item.alarm_type[0].value) {
										item.alarm_typeName = item.alarm_type[0].value
									} else {
										item.alarm_typeName = '暂无'
									}
								}
								return item
							})
							this.loading = false
							console.log(this.tableData)
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}
			},
			//获取过滤信号
			getAllSign() {
				axiosGet('/basic/sys/', {}, (res) => {
					if (res.code == 0) {
						this.policeStatusArr = res.detail
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取单位信息
			getCompanyMess() {
				let url = '/basic/elevator/' + this.liftId + '/'
				axiosGet(url, {}, (res) => {
					if (res.code == 0) {
						this.property_company_name = res.detail.property_company_name
						this.internal_no = res.detail.internal_no
						this.alarm = res.detail.alarm
						if (this.alarm.length == 0) {
							this.alarmMess = '暂无异常信号'
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			find() {
				this.getTodayMess()
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange(res) {
				console.log(res)
			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTodayMess()
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTodayMess()
			},
			beforeDestroy() {

			}
		},
	}
</script>

<style scoped lang="less">
	.operationBox {
		display: flex;
		flex-direction: row;
		background: #E9EEF3;

		.operationBoxLeft {
			width: 40%;
			height: 100%;
			background: #fff;
			margin-right: 0.5%;
			overflow-y: auto;

			.liftName {
				margin: 5px 0;
			}

			.liftBox {
				width: 100%;
				display: flex;
				justify-content: center;

				.bgLift {
					width: 213px;
					height: 330px;
					background: url(/img/lift.10c4d9bc.png) no-repeat 0 0;
					background-size: cover;
					position: relative;

					.lift-num {
						display: flex;
						width: 100%;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 17px;

						.Num {
							padding: 1px 25px;
							background: #000;
							color: #eee;
							font-family: Digital;
							position: relative;

							.upOrDown {
								position: absolute;
								right: 5px;
								top: 5PX;
								width: 10px;
							}
						}
					}

					.door {
						position: absolute;
						top: 48px;

						img {
							width: 42%;
							height: 270px;
						}

						img:first-child {
							transform-origin: left
						}

						img:last-child {
							transform-origin: right;
						}
					}
				}
			}
		}

		.operationBoxRight {
			width: 59.5%;
			height: 100%;
			background: #fff;
			padding-left: 10px;
			box-sizing: border-box;

			.col {
				display: flex;

				span {
					width: 110px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 15px;
				}
			}

			.tableBox {
				height: 82%;
				overflow-y: auto;
				overflow-x: hidden;
			}
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		align-items: center;

		// margin-bottom: 10px;
		// margin-top: 5px;
		i {
			width: 3px;
			height: 15px;
			background: #2d8cf0;
			margin: 5px 5px;
		}
	}

	.liftOpen {
		animation: openDoor 3s linear 1 forwards;
	}

	.liftClose {
		animation: closeDoor 3s linear 1 forwards;
	}

	.transFormZ {
		transform: rotateZ(180deg);
	}

	@keyframes openDoor {
		10% {
			transform: rotateY(20deg)
		}

		30% {
			transform: rotateY(40deg)
		}

		50% {
			transform: rotateY(60deg)
		}

		60% {
			transform: rotateY(80deg)
		}

		80% {
			transform: rotateY(90deg)
		}

		100% {
			transform: rotateY(90deg)
		}
	}

	@keyframes closeDoor {
		0% {
			transform: rotateY(90deg)
		}

		30% {
			transform: rotateY(80deg)
		}

		50% {
			transform: rotateY(60deg)
		}

		60% {
			transform: rotateY(40deg)
		}

		80% {
			transform: rotateY(20deg)
		}

		100% {
			transform: rotateY(0deg)
		}
	}

	.rotateMove {
		// transform: rotateY(90deg) !important;
	}

	.rotateMoveTwo {
		// transform: rotateY(0deg) !important;
	}

	.listNmaTwo {
		margin-bottom: 0;
		margin-top: 5px;
	}

	.lookAllSign {
		color: #409eff;
		font-size: 14px;
		text-align: left;
		cursor: pointer;
		margin-top: 5px;
		text-indent: 5px;
	}

	.allSignImg {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.imgItem {
		width: 20%;
		margin: 3px 0;

		p {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 14px;
		}
	}

	.messBox {
		margin: 5px 0;
		padding-left: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
</style>
